<link href="assets/css/attrPanel.css" rel="stylesheet" />
<link href="assets/css/bootstrap-select.css" rel="stylesheet" />
<!--BEGIN 属性面板 -->
<div class="widget flat radius-bordered">
    <div class="widget-header bg-sky theme">
        <span class="widget-caption">属性面板</span>
    </div>
    <div class="widget-body no-padding">
        <div class="table-scrollable">
            <!-- 数据表列信息列表 -->
            <table class="table table-bordered attrPanel">
            	<#list formAttrGroup as attrGroup>
           			<thead>
		                  <tr>
		                      <th title="${attrGroup.remark}" colspan="2">${attrGroup.attrName}</th>
		                  </tr>
	                 </thead>
                 <tbody>
                  <#list attrGroup.childrenFormAttr as childrenAttr>
                  	<tr>
                       <td title='${childrenAttr.remark}'>
                       		${childrenAttr.attrName}
                       		<#if childrenAttr.isOnlySupportHtml5>
	                  			<i class='fa fa-html5' style='color:#EC795C;'></i>
	                  		</#if>
                       </td>
                       <td>
                       	<#if childrenAttr.attrName == 'type'>
                       		<select class="types selectpicker attrValue_select" 
                          		 	data-style="btn btn-default purple attr-select"
								data-size="10"
								data-showSubtext="true"
								data-live-search="false"
								data-header="选择属性值"
								targetAttr="${childrenAttr.attrName}"
								itemsJson='${childrenAttr.attrValue?trim}'
								data-json='[{key:"button",value:"	定义可点击的按钮（大多与 JavaScript 使用来启动脚本）"},{key:"checkbox",value:"	定义复选框。"},{key:"color",value:"	定义拾色器。"},{key:"date",value:"	定义日期字段（带有 calendar 控件）"},{key:"datetime",value:"	定义日期字段（带有 calendar 和 time 控件）"},{key:"datetime-local",value:"	定义日期字段（带有 calendar 和 time 控件）"},{key:"month",value:"	定义日期字段的月（带有 calendar 控件）"},{key:"week",value:"	定义日期字段的周（带有 calendar 控件）"},{key:"time",value:"	定义日期字段的时、分、秒（带有 time 控件）"},{key:"email",value:"	定义用于 e-mail 地址的文本字段"},{key:"file",value:"	定义输入字段和\"浏览...\" 按钮，供文件上传"},{key:"hidden",value:"	定义隐藏输入字段"},{key:"image",value:"	定义图像作为提交按钮"},{key:"number",value:"	定义带有 spinner 控件的数字字段"},{key:"password",value:"	定义密码字段。字段中的字符会被遮蔽。"},{key:"radio",value:"	定义单选按钮。"},{key:"range",value:"	定义带有 slider 控件的数字字段。"},{key:"reset",value:"	定义重置按钮。重置按钮会将所有表单字段重置为初始值。"},{key:"search",value:"	定义用于搜索的文本字段。"},{key:"submit",value:"	定义提交按钮。提交按钮向服务器发送数据。"},{key:"tel",value:"	定义用于电话号码的文本字段。"},{key:"text",value:"	默认。定义单行输入字段，用户可在其中输入文本。默认是 20 个字符。"},{key:"url",value:"	定义用于 URL 的文本字段。"}]'>
                           	</select>
                         <#else>
                           <input type="text" class="attrValue" value="${childrenAttr.attrValue}" targetAttr="${childrenAttr.attrName}" >
                       	</#if>
                       </td>
                   </tr>
              	</#list>
             	</tbody>
            	</#list>
            </table>
        </div>
    </div>
</div>
<!--END 属性面板 -->

<!--Page Related Scripts-->
<script src="assets/js/bootbox/bootbox.js"></script>
<script src="assets/js/select/bootstrap-select.js"></script>
<script type="text/javascript">
var attrPanel=$(".attrPanel");
//自动绑定下拉属性枚举项
var selectes=attrPanel.find("select");
selectes.each(function(index,selecte){
	var itemsStr=$(selecte).attr("itemsJson");
	var items=eval(itemsStr);
	$(selecte).html("<optgroup data-icon='icon-ok'>");
	for(var i=0;i<items.length;i++){
		var key=items[i].key;
		var value=items[i].value;
		var onlyh5=items[i].onlyh5;
		var option="<option data-title='"+key+"' value='"+key+"'  data-content=\"<span title='"+value+"'>"+key;
		if(onlyh5==1){
			option+="<i class='fa fa-html5' style='color:#EC795C;'></i>"
			
		}
		option+="</span>\"></option";
	    $(selecte).append(option);
	}
	$(selecte).append("</optgroup>");
	$(selecte).selectpicker();
});
</script>